/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */

async function setChannleList() {
  const result = await axios({
    url: "/v1_0/channels",
  });
  const listdata = result.data.channels;
  const liststr = listdata.map((item) => {
    return `<option value="${item.id}">${item.name}</option>`;
  });
  document.querySelector(".form-select").innerHTML =
    `<option value="" selected="">请选择文章频道</option>` + liststr.join("");
}

//页面响应时触发一次
setChannleList();

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */

document.querySelector(".img-file").addEventListener("change", async (e) => {
  const imgObj = e.target.files[0];
  // console.log(imgObj);

  const fd = new FormData();
  fd.append("image", imgObj);
  const result = await axios({
    url: "/v1_0/upload",
    method: "POST",
    data: fd,
  });
  // console.log(result);
  document.querySelector(".rounded").src = result.data.url;
  document.querySelector(".rounded").classList.add("show");
  document.querySelector(".place").classList.add("hide");
});

document.querySelector(".rounded").addEventListener("click", () => {
  document.querySelector(".img-file").click();
});

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector(".send").addEventListener("click", async (e) => {
  if (e.target.innerHTML != "发布") return;
  // console.log(e.target);
  const form = document.querySelector(".art-form");
  const data = serialize(form, { hash: true, empty: true });

  delete data.id;

  data.cover = {
    type: 1, //类型
    images: [document.querySelector(".rounded").src], //url网址
  };

  // //基于axios提交到服务器保存

  try {
    const result = await axios({
      url: "/v1_0/mp/articles",
      method: "POST",
      data,
    });
    myAlert(true, "请求成功");
    form.reset();

    //清空图片设置
    document.querySelector(".rounded").src = "";
    document.querySelector(".rounded").classList.remove("show");
    document.querySelector(".place").classList.remove("hide");

    //清空富文本框内容
    editor.setHtml("");

    setTimeout(() => {
      location.href = "../content/index.html";
    }, 2000);
  } catch (error) {
    myAlert(false, error.response.data.message);
  }
});

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
(function () {
  const id = location.search;
  const params = new URLSearchParams(id);
  params.forEach(async (value, key) => {
    if (key === "id") {
      document.querySelector(".title").innerHTML = "修改文章";
      document.querySelector(".btn").innerHTML = "修改";

      const result = await axios({
        url: `/v1_0/mp/articles/${value}`,
      });
      // console.log(result);
      const dataObj = {
        channel_id: result.data.channel_id,
        title: result.data.title,
        images: result.data.cover.images[0],
        content: result.data.content,
        id: result.data.id,
      };
      Object.keys(dataObj).forEach((key) => {
        if (key == "images") {
          document.querySelector(".rounded").src = dataObj[key];
          document.querySelector(".rounded").classList.add("show");
          document.querySelector(".place").classList.add("hide");
        } else if (key == "content") {
          editor.setHtml(dataObj[key]);
        } else {
          document.querySelector(`[name=${key}]`).value = dataObj[key];
        }
      });
    }
  });
})();

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector(".send").addEventListener("click", async (e) => {
  if (e.target.innerHTML != "修改") return;
  try {
    const from = document.querySelector(".art-form");
    const data = serialize(from, { hash: true, empty: true });

    data.cover = {
      type: document.querySelector(".rounded").src ? 1 : 0, //类型
      images: [document.querySelector(".rounded").src], //url网址
    };

    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: "PUT",
      data,
    });
    // console.log(data);
    // console.log(res);
    myAlert(true, "修改文章成功");
  } catch (error) {
    myAlert(false, error.response.data.message);
  }
});
